import { useState } from "react"
import styled from "@emotion/styled"
import CheckInCalendar from "./CheckInCalendar"
import Svg from "@/components/base/Svg"
import { css } from "@emotion/react"
import dayjs from "dayjs"

const OverviewContainer = styled.div`
    background-color: white;
    border-radius: 16rem;
    margin-bottom: 12rem;
    width: 100%;
`

const TaskTitle = styled.div`
    display: flex;
    justify-content: space-between;
`

const PointsTotal = styled.span`
    color: #ff1f57;
    font-weight: bold;
    font-family: Gilroy;
    font-weight: 700;
    font-size: 24rem;
    line-height: 32rem;
    display: flex;
    align-items: center;
    gap: 8rem;
`

const PointsStyled = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 16rem;
    line-height: 30rem;
    color: #ff1f57;
`
const TaskTitleLeft = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    font-family: Gilroy;
    font-weight: 500;
    font-size: 24rem;
    line-height: 30rem;
    color: #131416;
`

const TasksOverview: React.FC = () => {
    // 模拟已签到的日期数据，使用dayjs替代Date
    const [checkedInDays, setCheckedInDays] = useState<dayjs.Dayjs[]>([
        dayjs(new Date(2025, 3, 1)), // 11月1日
        dayjs(new Date(2025, 3, 2)), // 11月2日
        dayjs(new Date(2025, 3, 3)), // 11月3日
        dayjs(new Date(2025, 3, 4)), // 11月4日
        dayjs(new Date(2025, 3, 5)), // 11月5日
    ])

    const handleCheckIn = () => {
        const today = dayjs()
        // 检查今天是否已经签到
        const alreadyCheckedIn = checkedInDays.some(
            (date) =>
                date.date() === today.date() &&
                date.month() === today.month() &&
                date.year() === today.year(),
        )

        if (!alreadyCheckedIn) {
            setCheckedInDays([...checkedInDays, today])
            // 这里可以添加签到成功的提示或其他逻辑
        }
    }

    return (
        <OverviewContainer>
            <TaskTitle>
                <TaskTitleLeft>
                    <div>Complete today's tasks to get</div>
                    <PointsTotal>
                        <div>₱ 240</div>
                        <PointsStyled>(20,000 Points)</PointsStyled>
                    </PointsTotal>
                </TaskTitleLeft>
                <Svg
                    src="pages/PointsPage/calendar.svg"
                    css={css`
                        width: 120rem
                        height: 120rem
                        object-fit: fill
                    `}
                />
            </TaskTitle>

            <CheckInCalendar
                onCheckIn={handleCheckIn}
                checkedInDays={checkedInDays}
                currentStreak={5}
            />
        </OverviewContainer>
    )
}

export default TasksOverview
